<template>
  <div class="ano-tools">
    <div class="item">
      <div class="buttons">
        <div class="btn-box" :class="{'btn-active': !img.isCenter}" @click="handleCenter">
          <div class="btn-icon icon-center"></div>
        </div>
      </div>
      <div class="label">居中</div>
    </div>

    <div class="item">
      <div class="buttons">
        <!-- <div class="btn-box" :class="{'btn-active': !img.isLayerTop}" @click="handleLayerTop"> -->
        <div class="btn-box" @click="handleLayerTop">
          <div class="btn-icon icon-top"></div>
        </div>
        <!-- <div class="btn-box" :class="{'btn-active': !img.isLayerButtom}" @click="handleLayerBase"> -->
        <div class="btn-box" @click="handleLayerBase">
          <div class="btn-icon icon-base"></div>
        </div>
      </div>
      <div class="label">层次</div>
    </div>

    <div class="item">
      <div class="buttons">
        <div class="btn-box btn-active" :class="{'btn-flipX': !img.isRotateY}" @click="handleRotateY">
          <div class="btn-icon icon-rotateY"></div>
        </div>
        <div class="btn-box btn-active" :class="{'btn-flipY': !img.isRotateX}" @click="handleRotateX">
          <div class="btn-icon icon-rotateX"></div>
        </div>
      </div>
      <div class="label">翻转</div>
    </div>

    <!-- <div class="item">
      <div class="buttons">
        <div class="btn-box"></div>
      </div>
      <div class="label">对齐</div>
    </div> -->
  </div>
</template>

<script>

export default {
  name: 'anoTools',
  components: {
  },
  props: {
    img: {
      type: Object,
      default: () => {
        return {}
      }
    },
    maxZIndex: {
      type: Number,
      default: 0
    },
    minZIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // isCenter: false,
      // isLayerTop: true,
      // isRotateY: false,
      // isRotateX: false,
    }
  },
  created() {

  },
  methods: {
    handleCenter() {
      this.$emit('change', {
        isCenter: true,
      })
    },
    handleLayerTop() {
      if (this.img.zIndex === this.maxZIndex - 1) {
        return;
      }
      this.$emit('change', {
        isLayerTop: true,
        isLayerButtom: false,
        zIndex: this.maxZIndex + 1
      })
    },
    handleLayerBase() {
      if (this.img.zIndex === this.minZIndex + 1) {
        return;
      }
      this.$emit('change', {
        isLayerTop: false,
        isLayerButtom: true,
        zIndex: this.minZIndex - 1
      })
    },
    handleRotateY() {
      this.$emit('change', {
        isRotateY: !this.img.isRotateY
      })
    },
    handleRotateX() {
      this.$emit('change', {
        isRotateX: !this.img.isRotateX
      })
    },
  }
}
</script>

<style lang="less" scoped>
.ano-tools {
  display: flex;
  padding-top: 6px;
  .item {
    text-align: center;
    margin-right: 15px;
    .label {
      font-size: 13px;
      line-height: 1.5;
      margin-top: 4px;
    }
  }
  .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid #b7b7b7;
    background-color: #fff;
    .btn-box {
      border-right: 1px solid #b7b7b7;
      opacity: .9;
      cursor: pointer;
      &:last-child {
        border-right: 0;
      }
      &.btn-active {
        opacity: 0.9;
        cursor: pointer;
        user-select: none;
      }
      &.btn-flipX .btn-icon {
        transform: rotateY(180deg);
      }
      &.btn-flipY .btn-icon {
        transform: rotateX(180deg);
      }
    }
    .btn-icon {
      width: 48px;
      height: 32px;
    }
    .icon-center {
      background: url(../../../assets/imgs/icon-center.png) no-repeat center;
      background-size: 24px auto;
    }
    .icon-top {
      background: url(../../../assets/imgs/icon-layer-1.png) no-repeat center;
      background-size: 24px auto;
    }
    .icon-base {
      background: url(../../../assets/imgs/icon-layer-2.png) no-repeat center;
      background-size: 24px auto;
    }
    .icon-rotateX {
      background: url(../../../assets/imgs/icon-flip-2.png) no-repeat center;
      background-size: 24px auto;
    }
    .icon-rotateY {
      background: url(../../../assets/imgs/icon-flip-1.png) no-repeat center;
      background-size: 24px auto;
    }
  }
}
</style>
